<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>

<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<base href="<%=basePath%>" />

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/qrcode.js"></script>
<title>项目管理系统后台登录界面</title>
<style>
* {
	padding: 0px;
	margin: 0px;
}

body {
	font-family: Arial, Helvetica, sans-serif;
	background-image: url("images/grass.jpg");
	background-size: 100% 100%;
	font-size: 13px;
}

img {
	border: 0;
}

.lg {
	width: 468px;
	height: 468px;
	margin: 100px auto;
	background: url(images/login_bg.png) no-repeat;
}

.lg_top {
	height: 200px;
	width: 468px;
}

.lg_main {
	width: 400px;
	height: 180px;
	margin: 0 25px;
}

.lg_m_1 {
	width: 290px;
	height: 100px;
	padding: 60px 55px 20px 55px;
}

.ur{
	height: 30px;
	color: #666;
	width: 170px;
	margin-top: 20px;
	margin-left: 10px;
	font-size: 16pt;
	font-family: Arial, Helvetica, sans-serif;
	color: #666;
	
}
.pw{
	height: 30px;
	color: #666;
	width: 170px;
	margin:4px 28px;
	margin-left: 10px;
	font-size: 16pt;
	font-family: Arial, Helvetica, sans-serif;
	color: #666;
}

.yz {
	height: 30px;
	color: #666;
	width: 110px;
	margin-left: 10px;
	font-size: 16pt;
	font-family: Arial, Helvetica, sans-serif;
	color: #666;
}

.code {
	position: absolute;left: 648px;
	position: absolute;top: 455px;
}

.bn {
	width: 330px;
	height: 72px;
	background: url(images/enter.png) no-repeat;
	border: 0;
	display: block;
	font-size: 18px;
	color: #FFF;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bolder;
}

.lg_foot {
	height: 80px;
	width: 330px;
	padding: 6px 68px 0 68px;
}
.
</style>

<script type="text/javascript" src="js/jquery-1.8.3.js"></script>


<script type="text/javascript">
	//登录账户name和非空判断
	function checkName() {
		var $name = $("#tname").val();		
		if ($name == "" || $name == null) {
			$("#nameNew").html("<img src='images/onError.gif'>请输入账号");
			return false;
		}
		$("#nameNew").html("");
	    return true;
	}

	function che(){
		var $password = $("#password").val();	
		$("#password~span").remove();
		if ($password == "" || $password == null) {// <span id="pwdNew"></span>
			$("#password").after("<span style='margin-left:-29px;'><img src='images/onError.gif'>请输入密码</span>");
			return false;
		} 
		$("#pwdNew").html("");
	    return true;		
	}
	var qrcode = new QRCode(document.getElementById("qrcode"), {
		width : 100,
		height : 100
	});

	function makeCode () {		
		var elText = document.getElementById("text");
		
		if (!elText.value) {
			alert("Input a text");
			elText.focus();
			return;
		}
		
		qrcode.makeCode(elText.value);
	}
	function login(){
		var name = ("#name").val();
		var password = ("#password").val();
		$.ajax({
			type :"text",
			url :"teachers/loginqrcode",
			data:{
				"name":name,
				"password":password
			},
			async:false,
			dataType:'text',
			success:function(r){
				if(r=="1"){
					qrcode.makeCode(elText.value);
					alert("<a href='teacherlist.jsp'></a>");
				}else{
					alert("登录失败！请检查您输入的账户或者密码是否输出错误！");
				}
			}
		});
	}
	$(function() {
		$("#code").click(function() {
			alert("zzsz");
			login();
		});
		$("#myform").submit(function() {
			var flag=true;
			if(!checkCode()) flag=false;
			return flag;
		});
	});

	
</script>
</head>

<body class="b">
	<div class="lg">
		<form id="myform" action="teachers/loginqrcode" method="post">
			<div class="lg_top"></div>
			<div class="lg_main">
				<div class="lg_m_1">

					<input name="tname" id="tname" type="text" class="ur" placeholder="用户账号" value="" onblur="checkName()"/><span id="nameNew"></span>
					<input name="password" id="password" type="password" type="password" class="pw" placeholder="用户密码" value=""  onblur="che()"/>
					<input name="tname" id="tname" type="text" class="ur" placeholder="用户账号" value="" onblur="checkName()"/>
					<input name="tname" id="tname" type="text" class="ur" placeholder="用户账号" value="" onblur="checkName()"/>
					<input name="tname" id="tname" type="text" class="ur" placeholder="用户账号" value="" onblur="checkName()"/>
					<c:if test="${requestScope.shibai eq '1'}">
                    	 <span style='margin-left:65px;color:red'>用户名密码错误</span>
                    </c:if>
				</div>
			</div>
			<div class="lg_foot">
				<input type="button" value="登录" class="code" id="code" />
			</div>
			<div id="qrcode" style="width:100px; height:100px; margin-top:15px;"></div>
		</form>
	</div>
</body>
</html>
